Tracking how your Ads perform is really important to see how well your Ads perform. In this tutorial we will show how our Ads perform on the list of all Ads. We will track impressions, clicks and also the click-through rate.
This tutorial is a part of a tutorial series “Simple WordPress Advertising Plugin“. The series consists of several tutorials which are:
- The Introduction – Create the base of the plugin, create Ads in the admin area and more
- Displaying Ads – Displaying Ads on the front page, caching them on a daily basis and more
- Tracking Ads – tracking Ad impressions and clicks, calculating CTR (click-through-rate)
- Widget and Shortcode – creating a simple widget and a shortcode to display the Ads in sidebar or content
You can download the plugin with the code from this part here: simple-wp-ads3.
Creating Tracking Columns
To se how our Ads are performing, we will create some custom columns in the list of all Ads. I have already written an article how to add custom WordPress columns using OOP and we will use the same code from that article. The classes will just have different names to reflect our plugin.
Create a new file inc/swa-column.php and copy these code:
This will handle the creation and registration of custom columns. We will also add a factory class that will be used to create a new custom column for each column definition. Create a new file inc/swa-columns.php and add this code to it:
Open the file simple-wp-ads.php and let’s add a new method to our main class. This method will be called make_columns:
This will instantiate our factory class SWA_Columns with all the columns definitions. We need to call that method for our columns to be created. This will have to run when we are in the admin area. We will do that in our method run.
Displaying the Column Data
If you look closely to the columns definitions, you can see that we are registering three displaying functions: swa_impressions, swa_clicks and swa_ctr.
We will define those functions in the file inc/swa-functions.php. Let’s define the first two which are actually the same just for a different column:
This functions are used to get the post meta by the Ad ID. The column key is the post meta key we want to retrieve. Once we get the post meta value, we check if it is null. If there is nothing retrieved, then we make it a zero (0). The last line is displaying the data.
For calculating click-through rate we are using a similar but different approach:
Here we are not using the column key provided since we are not saving any post meta by that key. We are getting both the impressions and the clicks. If both of them are null we are setting them to zero (0).
If both of them are bigger than zero (0), we are calculating the CTR by dividing clicks by impressions. Since we are dividing them and expecting a decimal value, we are setting the CTR to float.
To create a decimal display, we are using the PHP function number_format. In this function we are passing the calculated CTR, number of decimal points we want, the character that will present the decimal point which is ‘.’ here and also the character to separate thousands (1,000.00, 1,000,000.00 and similar) which it won’t happen here. The last thing is concatenating the percentage character.
Adding dependencies
These two new files we have created are also the dependencies we have to include. Let’s add them in our method load_dependencies:
Extending the Run method
We have to extend our method run with new method calls and action hooks for our custom columns to be set and also call everything we need to track our Ads. So let’s extend it:
The first new addition are the two action hook wp_ajax.... These action hook are dynamically created once we create an AJAX call on our WordPress site with an parameter action. The second hook with nopriv will be called when the visitor is not logged in. Since we want to track every click, we will have to use this action to track the regular visitor’s click.
The second addition is in the is_admin check where we call our new method make_columns.
The last addition is when we are on the front end of our site to add new script. This script will be enqueued using the hook wp_enqueue_scripts.
Tracking Impressions
To calculate the impressions, we will have to redefine our function where we display the Ads. This function swa_display_ads is defined in inc/swa-front.php. The refactored part is this:
In this refactored code we are setting the Ads to their own variables $the_top_ad and $the_bottom_ad. Once we get the Ad’s definition, we pass it in a new function swa_set_impressions and also to the previously defined function swa_render_ad for rendering.
Let’s now define our new function swa_set_impressions:
We are getting the ID from the Ad’s definition. With that ID we are retrieving the impressions from the database. We are checking if the impression is a value and if it is not, we are setting it to zero (0). After that, we are incrementing the value of impressions by 1 and save the new value into the database.
We are using the same meta key _impressions for our custom column so we can immediately see the impressions going up for every refresh of our Ad.
Tracking Clicks
For tracking clicks we will have to use JavaScript also. With JavaScript we will create AJAX calls to our WordPress site and trigger the hooks wp_ajax... defined in the method run.
Let’s first create our JavaScript file. Add a new folder assets to our plugin’s folder. In that folder create another one called js. In that folder create the file swa.js.
We will enqueue our JavaScript file in the function swa_enqueue_scripts. Add this code to the file inc/swa-front.php:
The first lines are the same we used in our function swa_inline_style. We are checking if there are any Ads to display. Only then, WordPress will enqueue our scripts and include them in the footer.
The first thing here is registering the script. We are not enqueueing the script right away. Once it is registered, we are localizing the script so that we can include a global JavaScript object with the URL to the WordPress AJAX file admin-ajax.php. We are localizing it with the object called swa.
After that, we are enqueueing the script. This will enable us to use the object swa in our JavaScript code and retrieve the URL value.
It is the time to create our JavaScript code, so put this code in the swa.js file:
Here we are binding a function to the click trigger on our Ad links. Once a user clicks on our Ad, we will get the Ad ID from the attribute data-id. This attribute we don’t have yet on our Ad links, but we will create it right after this.
Once we got the ID, we are creating an AJAX POST to the URL retrieved from our object swa. The parameters we are posting are action and id. The action will create the dynamic action hook we have in our run method.
Adding the Attribute data-id
To add that attribute we have to change our function swa_render_ad. This is a simple refactoring change:
You can see on the second line that we are adding the data-id to our Ad link.
Incrementing Clicks
When our visitors clicks the Ad, we are creating a POST to our site using AJAX. The actions that will be triggered are wp_ajax_swa_ad_click and wp_ajax_nopriv_swa_ad_click. Both of them have a function hooked called swa_ad_click. So let’s define that function:
We are getting the ID from our POST variable. After that we are also getting the clicks from the database using our ID. Once we get our clicks and check if there is a database record, we increment the click count by 1. After that, we simply update the database with our click count and call a function wp_die to stop the site from processing any further.
You can now track every metric we need and also see the CTR:
Conclusion
By using some simple database operations and JavaScript we can easily track various metrics on our site. The same is done by Google Analytics and other tracking codes. Their codes are very complex but this simple example can get you the idea of how everything works. In this tutorial we have learned how to track clicks and impressions and we can even track the performance of our Ads.
You can easily create your own tracking system for various parts of your site and see how well they perform.
If you have ever used anything like this to track your site, please share it in the comments below! If you have any questions about this or suggestions to improve, you are welcome to comment it also:)
Become a Sponsor
Share this: